﻿<div>

<script type="text/javascript">
    $(function () {
        var t = $("#t").tabs({
            width: 600,
            height: 200,
            lineHeight: 0,
            enableConextMenu: true,
            enableNewTabMenu: true,
            showOption: true,
            contextMenu: [
                { text: "测试菜单1", iconCls: "icon-hamburg-address", handler: function () { alert("你点击了测试菜单1"); } },
                { text: "测试菜单2", handler: function () { alert("你点击了测试菜单2"); } },
                "-",
                { text: "测试菜单3", iconCls: "icon-hamburg-pencil", handler: function () { alert("你点击了测试菜单3"); } },
            ]
        });
    });
</script>

<h2>jEasyUI Tabs Extensions - 选项卡头右键菜单 - 自定义菜单</h2>
<p>该部分扩展由文件 jeasyui.extensions.tabs.js 实现。</p>
<hr />
<p>右键点击下面这个 easyui-tabs 的标题头部试试，注意 tab1 和其他的 tab 的右键菜单有何不同</p>
<div id="t">
    <div data-options="title: 'tab1', repeatable: true">tab1</div>
    <div data-options="title: 'tab2'">tab2</div>
    <div data-options="title: 'tab3'">tab3</div>
    <div data-options="title: 'tab4'">tab4</div>
    <div data-options="title: 'tab5'">tab5</div>
    <div data-options="title: 'tab6'">tab6</div>
</div>

</div>